// tslint:disable-next-line:jsx-no-multiline-js

import React, { Component } from 'react';
import { ConnectState, UserInfo } from '@/models/connect';
import { connect } from 'dva';
import { Icon, Dropdown, Menu } from 'antd';
import styles from './index.css';
import router from 'umi/router';
import { removeToken } from '@/utils/cookie';

interface HeaderProps {
  user: UserInfo;
  submitting: string;
}

interface HeaderState {
  now: Date;
  time: string;
  currentWeek: string;
}

const now = new Date();
const time = now.toLocaleTimeString();
const currentTime = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
const weekMap: string[] = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const week: Date = new Date(Date.parse(currentTime.replace(/-/g, '/')));

const currentWeek: string = weekMap[week.getDay()];

@connect(({ user, loading }: ConnectState) => ({
  submitting: loading.effects['login/login'],
  user: user.user,
}))
class Header extends Component<HeaderProps, HeaderState> {
  state: HeaderState = {
    now,
    time,
    currentWeek,
  };

  componentDidMount() {
    this.handleGetTime();
  }

  // 时钟
  handleGetTime = () => {
    setInterval(() => {
      const time = new Date().toLocaleTimeString();
      this.setState({
        time,
      });
    }, 1000);
  };

  render() {
    const { now, currentWeek } = this.state;
    const { user } = this.props;

    const menu = (
      <Menu style={{ marginRight: '86px' }}>
        <Menu.Item
          onClick={() => {
            router.push('/device');
          }}
        >
          <span>设备管理</span>
        </Menu.Item>
        <Menu.Item
          onClick={() => {
            router.push('/Statistics');
          }}
        >
          <span>统计报表</span>
        </Menu.Item>
        <Menu.Item
          onClick={() => {
            router.push('/CallpoliceManage');
          }}
        >
          <span>报警管理</span>
        </Menu.Item>
        <Menu.Item
          onClick={() => {
            router.push('/JournalManage');
          }}
        >
          <span>日志管理</span>
        </Menu.Item>
        <Menu.Item
          onClick={() => {
            router.push('/system');
          }}
        >
          <span>系统管理</span>
        </Menu.Item>
      </Menu>
    );
    const userMenu = (
      <Menu className={styles.userMenu}>
        <Menu.Item
          onClick={() => {
            removeToken();
            router.push('/login');
            localStorage.clear();
          }}
        >
          <span>退出登录</span>
        </Menu.Item>
      </Menu>
    );
    return (
      <div className={styles.header}>
        <div className={styles.date}>
          {`${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`}
          <span style={{ margin: '0 15px' }}>{currentWeek}</span>
          {/* <span>{this.state.time}</span> */}
        </div>
        {/* <div className={styles.title}>{process.env.MAIN_TITLE}</div> */}
        <div className={styles.title} />
        <div className={styles.tools}>
          <div className={styles.wrapper}>
            {/* {location.pathname !== '/home' ? (
              <Dropdown
                overlay={menu}
                className={styles.cursor}
                onClick={() => {
                  router.push('/home');
                }}
              >
                <span className={styles.homeImg}>
                  <img src={require('@/assets/images/dashboard/panl.png')} alt="" />
                  首页
                </span>
              </Dropdown>
            ) : (
              <div style={{ width: '47px', height: '21px' }} />
            )} */}
            {/* <Dropdown overlay={userMenu} className={styles.cursor}> */}
              <div className={styles.user}>
                <span>{user && user.surLoginName}&nbsp;&nbsp;&nbsp;欢迎您</span>
                <span className={styles.out} onClick={() => {removeToken(); router.push('/login'); }}>
                  <Icon type="poweroff" />&nbsp;&nbsp;退出
                </span>
                {/* <Icon type="caret-down" /> */}
              </div>
            {/* </Dropdown> */}
          </div>
        </div>
      </div>
    );
  }
}

export default Header;
